<template>

  <section id="addOrder"  class="add-order">

    <div class="add-order-time fx-row fx-row-center fx-row-space-between" @click.self="$refs.datePopup.showCheck();">
      <span>
         <i class="pos-b-1 iconfont icon-timeSelector"></i>
         <date-popup   v-on:change="changeDate" :time="selectDate" ref="datePopup" :dateInputStyle="dateInputStyle"   :limit="limit"></date-popup>
      </span>

      <i class="iconfont icon-arrow text-primary"></i>
    </div>

    <div class="order-friends order-bg">

        <h5 class="order-friends-count fx-row fx-row-center fx-row-space-between">
          <div>
            同行小伙伴  ({{userList.length}}/7)
          </div>
          <div class="order-friends-info">
            {{getUserWhole()}}
          </div>
         </h5>
        <div class="order-scroll">
          <ul class="order-friends"  :style="{'width' : (userList.length * 80)+'px' }">
            <li v-for="u in userList">
                <div class="ib bg-img-clip order-user-head" :style="{backgroundImage:`url(${u.userIcon})`}"></div>
                <h5 class="order-user-name">{{u.userName}}</h5>
            </li>
          </ul>
        </div>
    </div>


    <time-selection ref="timeSelectionObj"   :time="selectTime"  v-on:timeSelectionComplete="timeSelectionComplete"  :duration="duration"   class="mt10"/>


    <div class="order-bg mt10">

      <div class="fx-row fx-row-center fx-row-space-between mb20">
        <label class="text-color-light">时长:</label>
        <div class="">
          <check-list   v-on:change="changeTimeType"   v-model="selectTimeType"   :option="getTimeList" />
        </div>
      </div>

      <div class="fx-row fx-row-center fx-row-space-between mb20">
        <label class="text-color-light">人数:</label>


        <div class="">
          <span class="input-select fx-row fx-row-center" @click="$refs.pickpoppup.show('peopleType',[peopleTypeList])">
            <span class="input-content fx">
              {{selectPeopleCount.desc}}
            </span>
            <span class="input-select-icon">
               <i class="iconfont icon-arrow"></i>
            </span>
          </span>
        </div>

      </div>

      <div class="fx-row fx-row-center fx-row-space-between mb10">
        <label class="text-color-light">总计:</label>
        <div class="">
          {{total}}元
        </div>
      </div>

    </div>


    <div class="order-bg mt10">

      <div class="fx-row fx-row-center fx-row-space-between mb20">
        <label class="text-color-light">优惠券:</label>

        <div @click="toVoucher()" class="" :class="{'text-primary' : getUserAccount && getUserAccount.val > 0}">
          {{getUserAccount.desc}}
        </div>
      </div>

      <div  v-if="userArrears.isOvertime  == '1'" class="fx-row fx-row-center fx-row-space-between ">
        <label class="text-color-light">超时欠费:</label>
        <div class="">
          {{userArrears.overtimeCost}}元
        </div>
      </div>

      <div class="fx-row fx-row-center fx-row-space-between ">
        <label class="text-color-light">还需支付:</label>
        <div class="">
          {{needTo}}元
        </div>
      </div>
    </div>

    <p class="text-color-light order-tips text-center">
      温馨提示：开始时间前6小时取消预约，可全额退款；<br/>开始时间前6小时后取消预约，暂不支持退款
    </p>

    <div class="">
      <button  :disabled="orderState != 0"  @click="onPay" class="btn fixed-bottom-btn btn-primary btn-block btn-ve-md btn-seq">
        微信支付<span class="text-accent" style="font-size : 18px;">&nbsp;{{needTo}}&nbsp;</span>元
      </button>
    </div>


    <pick-popup  v-on:pickpoppupComplete="pickpoppupComplete" ref="pickpoppup" :slots="slots" :isShow="showPop" />

  </section>
</template>
<style lang="scss" scoped>
  @import "../css/add-order";
</style>

<script type="text/javascript" src="../js/addOrder"></script>


